<%--
  Created by IntelliJ IDEA.
  User: FENG1
  Date: 2022-05-26
  Time: 16:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>会员支付</title>
    <link href="static/component/pear/css/pear.css" rel="stylesheet" />
    <style>
        .tops,topXJMoney{
            margin-top: 10px;
        }
    </style>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-inline">
                <label class="layui-form-label">会员手机号</label>
                <div class="layui-inline">
                    <input type="text" name="phone" id="phone" lay-verify="title" autocomplete="off"
                           placeholder="请输入手机号名称" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-inline">
                        <input type="password" name="memberPwd" id="memberPwd" lay-verify="title" autocomplete="off"
                               placeholder="请输入密码" class="layui-input">
                    </div>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="over">确认</button>
                </div>
            <div class="layui-inline tops">
                <label class="layui-form-label">卡状态</label>
                <div class="layui-input-inline">
                        <input type="text" name="memstate" style="font-weight: bolder;font-size: 20px; width:181px" class="layui-input" disabled>
                </div>
            </div>
                <div class="layui-inline tops">
                    <label class="layui-form-label">会员级别</label>
                        <div class="layui-input-inline">
                        <input type="text" name="mMemberLeve" class="layui-input" disabled>
                        </div>
                </div>
                <div class="layui-inline tops">
                    <label class="layui-form-label">卡余额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="totalamount"  class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-inline tops">
                    <label class="layui-form-label">打折比例</label>
                    <div class="layui-input-inline">
                        <input type="text" name="discount" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-inline tops">
                    <label class="layui-form-label">优惠金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="salePrePrice" style="font-weight: bolder;font-size: 20px; font-family: 华文楷体; width:181px;color: #FF0000" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-inline tops">
                    <label class="layui-form-label">应收金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="goodsYPrice" style="font-weight: bolder;font-size: 20px; font-family: 华文楷体; width:181px"  class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-inline tops">
                    <label class="layui-form-label">实收金额</label>
                    <div class="layui-input-inline">
                        <input type="text" name="salePaidPrice" style="font-weight: bolder;font-size: 20px; font-family: 华文楷体; width:181px; color:#0000FF" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-inline topXJMoney">
                    <label class="layui-form-label">联合现金</label>
                    <div class="layui-input-inline">
                        <input type="text" name="XJMoney" placeholder="请输入现金支付的金额" disabled style=" font-weight: bolder;font-size: 20px; font-family: 华文楷体; width:181px; color: #FF0000" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="JZover" lay-submit="" lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                结账
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>
<script>
</script>
<script>
    layui.use(['form','jquery'],function(){
        let form = layui.form;
        let $ = layui.jquery;
        $('#JZover').addClass("layui-btn-disabled").attr("disabled",true);//默认结账按钮不可点状态
        var member;//会员信息
        var ords = "${ordsStr}".split(",");//订单详情id  分割成字符串
        var xiaoF = ${goodsYPrice};//消费金额
        $("[name='phone']").focus();//让手机号默认获取焦点
        $(".tops").hide();//默认会员信息隐藏
        $(".topXJMoney").hide();
        //获取当前窗口的索引
        var layerIndex = parent.layer.getFrameIndex(window.name);
        //定义高度设置函数
        /**
         * 设置弹窗的高度
         * @param height
         */
        function setLayerHight(height){
            parent.layer.style(layerIndex, {height: height});
        }
        form.on('submit(over)', function(data){
            var phone =$("[name='phone']").val();
            var memberPwd =$("#memberPwd").val();
            if(phone!="" && memberPwd!=""){
                $.post("member/selMember",{phone:phone,memberPwd:memberPwd},function(result){
                    if(result.success){
                        member = result.data;
                        if(member.memstate== "禁用"){
                            layer.msg("该会员已被禁用", {icon: 2, time: 1000})
                        }else{
                            var zhe =member.mMemberLeve.discount;//打折比例
                            var salePaidPrice =xiaoF*zhe/10;//优惠后实付金额
                            var YouH =xiaoF-salePaidPrice;//优惠的金额
                            if(member.totalamount<salePaidPrice){//判断会员剩余金额 是否大于消费金额
                                layer.msg("需要联合结账哦！！！",{icon: 7, time: 2000})
                                $("[name='XJMoney']").val((salePaidPrice-member.totalamount).toFixed(2));
                                $(".topXJMoney").show();
                            }
                            $('#JZover').removeClass("layui-btn-disabled").attr("disabled",false);
                            $("[name='goodsYPrice']").val(xiaoF.toFixed(2) +"元");
                            $("[name='salePaidPrice']").val(salePaidPrice.toFixed(2) +"元");
                            $("[name='salePrePrice']").val(YouH.toFixed(2)+"元");
                            $("[name='memstate']").val(member.memstate);
                            $("[name='mMemberLeve']").val(member.mMemberLeve.memberLeveName);
                            $("[name='totalamount']").val(member.totalamount.toFixed(2));
                            $("[name='discount']").val(member.mMemberLeve.discount+"折");
                            $(".tops").show();
                            setLayerHight("400px");
                        }
                    }else{
                        layer.msg(result.msg, {icon: 2, time: 1000})
                    }
                })
            }else{
                if(phone=="" && memberPwd!=""){
                    layer.msg("请输入手机号", {icon: 2, time: 1000})
                    $("[name='phone']").focus();
                }else if(phone!="" && memberPwd==""){
                    layer.msg("请输入密码", {icon: 2, time: 1000})
                    $("[name='memberPwd']").focus();
                }else{
                    layer.msg("请输入账号和密码", {icon: 2, time: 1000})
                    $("[name='phone']").focus();
                }
            }
        })
        form.on('submit(user-save)', function(){
            var paymanner = "会员支付";
            var totalamount =member.totalamount;
            alert(member);
            alert(typeof  member);
            console.log(member);
            if($("[name='XJMoney']").val()!=""){
                paymanner = "联合支付";
                alert(paymanner);
            }
            $.post("saleOrder/addSaleOrder",{ords: ords,paymanner:paymanner,memberId:member.memberId,discount:member.discount,totalamount:member.totalamount},function(result){
                if(result.success){
                    layer.msg(result.msg,{
                        icon: 1,
                        time: 1500
                    },function(){
                        window.close();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("OrdersTableId");
                        parent.layer.open({
                            type: 2,
                            title: '购买单',
                            shade: 0.1,
                            area: ['600px', '540px'],
                            content: '/printouts/index'
                        })
                    })
                }else{
                    layer.msg(result.msg, {
                        icon: 2,
                        time: 1000
                    });
                }
            })
        });
    })
</script>
</body>
</html>